<template>
  <!-- 主页面右侧编辑组件 -->
  <!-- 动态实现，通过左侧点击组件，根据其标识动态加载编辑组件内容 -->
  <div class="vy-cmp-center">
    <component :is="currentView"></component>
  </div>
</template>

<script>
export default {
  name: "vy-cmp-center",
  props: ["flag"],
  data() {
    return {
      currentView: null
    };
  },
  watch: {
    flag(val) {
      // 值变化时，重新执行动态组件逻辑，加载最新组件
      this.loadComponent();
    }
  },
  mounted() {
    // 初始化挂载时，执行动态组件加载逻辑
    this.$nextTick(() => {
      this.loadComponent();
    });
  },
  methods: {
    loadComponent() {
      // 读取自定义组件
      const requireComponents = require.context(
        "../centershow",
        false,
        /\.vue/
      );
      // 遍历出每个组件的路径
      requireComponents.keys().forEach(fileName => {
        // 获取组件名称
        var reqComName = fileName.substring(
          fileName.lastIndexOf("/") + 1,
          fileName.lastIndexOf(".")
        );
        // 判断组件名称和当前flag值
        if (reqComName == this.flag) {
          // 加载对应的组件实例
          const reqCom = requireComponents(fileName);
          this.currentView = reqCom.default; // 设置动态组件实例
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.vy-cmp-center {
  width: 100%;
  min-height: 100%;
  padding: 30px 30px;
  background: #ffffff;
}
</style>
